{% extends "aliyun/select_k8s_node.html" %}
{% load static %}


{% block create_k8s_node_header %}
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.css" />  
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script> -->
<link rel="stylesheet" href="{% static 'ace-builds/1.36.0/css/ace.css'%}" />  
<script src="{% static 'ace-builds/1.36.0/src-noconflict/ace.js'%}"></script>
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js
"></script>
{% endblock %}

{% block create_k8s_node %}

<h1>Basic JSON Editor Example</h1>

<div id='editor' style="height: 500px; width: 100%;"></div>
<button id='submit'>Submit (console.log)</button>

<script>
  // Initialize the editor
  var editor = ace.edit("editor");
  editor.setTheme("ace/theme/github"); // 设置主题  
  editor.session.setMode("ace/mode/json"); // 设置模式（语言

  // Hook up the submit button to log to the console
  document.getElementById('submit').addEventListener('click', function () {
    // Get the value from the editor
    console.log(editor.getValue());

    const dataToSend = editor.getValue();
    const jsonData = JSON.stringify(dataToSend);  
    const csrftoken = Cookies.get('csrftoken');

    fetch("{% url 'create' %}", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrftoken,
      },
      body: dataToSend
    })
      .then(response => response.json())
      .then(data => {
        console.log('Success:', data);
        // 在这里处理响应数据，如显示成功消息  
        
      })
      .catch((error) => {
        console.error('Error:', error);
        // 在这里处理错误情况  
      });


  });
</script>


{% endblock %}